@import '../lib/_mixins.scss';
.banner-box{
  position: relative;
  .ban-nav{
    background-color: #fff; height: 100%; width: 190px; padding: 0 24px; position: absolute; left: 50%; transform: translateX(-600px); top: 0; height: 100%; z-index: 40;
    .h2{padding: 24px 0; line-height: 1; font-size: 16px; font-weight: bold;}
    .a{
      display: inline-block;vertical-align: middle; color: #666666; font-size: 14px; width: 48%; line-height: 1; margin-bottom: 20px;
      &:hover{color: #0873F3;}
    }
    .a2{
      color: #305EFD; display: block; font-size: 14px; line-height: 1; margin-bottom: 10px;
      &:hover{text-decoration: underline;}
    }
  }
}
.banner {
  overflow: hidden;
  .banner-item {
    width: 100%;
    height:450px;
    display: block;
    object-fit: cover;
  }
  .arrow{width: 40px; height: 40px; background-color: rgba(0,0,0,0.3); border-radius: 50%; background-position: center; background-size: 10px !important;}
  .swiper-pagination {
    bottom: 35px; background-color: rgba(0,0,0,0.18); border-radius: 12px; line-height: 0; padding: 4px 0; left: 50%; margin-left: 600px; transform: translateX(-100%);text-wrap: nowrap;
    .swiper-pagination-bullet {
      width: 12px;
      border-radius: 50%;
      height: 12px;
      overflow: hidden;
      padding: 0;
      border: none;
      background-color: #fff;
      margin: 0 8px; vertical-align: middle; opacity: 0.5;
      .el-carousel__button {
        opacity: 0;
        width: 100%;
        height: 100%;
      }
      &.swiper-pagination-bullet-active {
        opacity: 1;
        // background-color: #2A7CF3;
      }
    }
  }
}


.home-tit{
  display: flex; align-items: center; justify-content: space-between;
  .le{
    font-size: 34px;
    b{font-weight: bold;}
  }
  .intro{font-size: 14px;}
}
.gexing-list{
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; text-align: center;
  .ico{display: block; width: 75px; margin: 0 auto 16px;}
  .name{line-height: 1; font-size: 16px;}
  .a{
    width: 142px; border-bottom: 4px solid #fff; padding-bottom: 15px; margin:0 10px 50px;
    &:hover{
      border-bottom-color: #2F5EFD;
      .name{font-weight: bold;}
    }
  }
}

.jiexi{
  display: flex; justify-content: space-between;
  .le{
    background: linear-gradient(1deg, #305EFD, #32ABFF); border-radius: 10px 0px 0px 10px; width: 216px; padding: 26px; padding-right: 0; height: 544px; box-sizing: border-box;
    .h2{
      font-size: 24px; margin-bottom: 46px; line-height: 27px; font-weight: bold; color: #fff;
      .p{font-size: 20px; font-weight: bold;}
    }
    .list{margin-left: 20px;}
    .a{
      width: 100%; line-height: 52px; padding: 0 0 0 18px; border: 1px solid #fff; margin-bottom: 20px; font-size: 20px; color: #fff; border-radius: 4px 0 0 4px; cursor: pointer;
      &:hover,&.on{color: #2F5EFD; background-color: #fff;}
    }
    .btn{
      width: 112px;
      height: 39px;
      background: #0135E6;
      border: 1px solid #FFFFFF;
      border-radius: 20px;
       margin: 50px auto 0; font-size: 16px; font-weight: bold; color: #fff;
    }
  }
  .ri{
    flex: 1; width: 100%; margin-left: 7px; padding: 20px; display: flex; align-items: stretch; justify-content: space-between; border: 1px solid #ECECEC; border-radius: 10px 0px 0px 10px; height: 544px; box-sizing: border-box;
  }
  .mid{
    width: 627px;
    .btn{
      width: 72px;
      height: 27px;
      background: #305EFD;
      border-radius: 13px; display: flex; align-items: center; justify-content: center; color: #fff;
    }
    .list0,.list1{
      margin-top: -10px;
      .a{
        font-size: 16px; cursor: pointer; display: flex; align-items: center;justify-content: space-between;
        .div{width: 530px;  background-position: 0 center; background-repeat: no-repeat;background-image: url('../images/newhome/ys-ico1.png'); line-height: 52px; padding-left: 23px; height: 52px; overflow: hidden; margin-right: 10px;}
        .name{color: #305EFD;}
        &.on{
          .name{color: #FF0000;}
        }
      }
    }
    .list2{
      .a{border: 1px dashed #C3D0FF; padding: 10px; padding-left: 20px; margin-bottom: 25px;}
      .lab{
        color: #305EFD; font-size: 12px; margin-left: 15px;
        width: 46px;
        height: 20px;
        border: 1px solid rgba(48, 94, 253, 0.2);
        border-radius: 4px; display: flex; align-items: center; justify-content: center;
      }
      .sp1{color: #FF0000; font-size: 12px; margin-right: 10px;}
    }
    .list3{
      flex-wrap: wrap;
      .a{font-size: 16px; padding: 0 18px; background-color: #F3F6FF; height: 49px; margin: 0 13px 14px 0;}
    }
  }
  
  .hot{
    width: 280px;
    .hot-ban{
      .el-carousel__indicators {
        bottom: 8px;
        .el-carousel__indicator {
          width:8px;
          border-radius: 50%;
          height:8px;
          overflow: hidden;
          padding: 0;
          border: none;
          background-color: #fff;
          margin: 0 4px; vertical-align: middle; opacity: 0.5;
          .el-carousel__button {
            opacity: 0;
            width: 100%;
            height: 100%;
          }
          &.is-active {
            opacity: 1;
            // background-color: #2A7CF3;
          }
        }
      }
    }
    .tabs{
      padding:5px 7px; background-color: #305EFD;border-radius: 4px; margin: 16px 0;
      .item{
        width:48%; display: flex; align-items: center; justify-content: center; border-radius: 4px; color:#fff; font-size: 18px;
        &.on{background-color: #fff; color: #000;}
      }
    }
    .tabs-con{
      .a{line-height: 35px; height: 35px; background-position: 0 center; background-repeat: no-repeat; padding-left: 34px;}
      .a0{background-image: url('../images/newhome/ys-ico2.png');}
      .a1{background-image: url('../images/newhome/ys-ico3.png');}
    }
  }
  
  
}
.main2{
  .bottom{
    line-height: 1; margin: 36px 0 77px;
    .line{width: 1px; height: 60px;background: #ECECEC; margin: 0 40px 0 35px;}
    .name{font-size: 18px; background-position: right center; background-repeat: no-repeat;background-image: url('../images/newhome/jt-1.png'); padding-right: 20px;}
    .p{color: #999; font-size: 12px; display: block; margin-top: 10px;}
    .ico{margin-right: 15px;}
  }
}
.main3{
  background-position: center; background-size: cover; background-image: url('../images/newhome/yks-bg.png'); padding-bottom: 62px;
  .tabs{
    .a{
      font-size: 22px; line-height: 28px; padding-bottom: 25px; position: relative; cursor: pointer; width: 140px; text-align: center;
      &.on{
        color: #305EFD; font-size: 28px; font-weight: bold;
        &::after{content: ''; display: block; width: 50%; height: 5px; background-color: #305EFD; position: absolute;bottom: 0; left: 50%; transform: translateX(-50%);}
      }
    }
    .intro{color: #B9C9FE; font-size: 22px;}
  }
  .mid{
    background-color: #fff; padding: 27px 24px; margin-bottom: 14px; box-sizing: border-box;
    .img{
      width: 820px; height: 350px; position: relative;
      .big{display: block; width: 100%; height: 100%; object-fit: cover;}
      .btn{
        width: 119px;
        height: 39px;
        font-size: 16px;
        border: 1px solid #FFFFFF; background-color: #fff;
        border-radius: 20px; position: absolute; right: 22px; top: 24px;
        .ico{margin-left: 10px;}
      }
      .btn2{background: #305EFD; color: #fff; top: 80px;}
    }
    .ri{
      width: 318px;
      .item{
        padding: 24px 20px; color: #fff; margin-bottom: 17px; border-radius: 8px;
        .name{font-size: 16px; font-weight: bold; line-height: 1; margin-bottom: 10px;}
        .intro{font-size: 12px;}
        &:nth-child(1){background: linear-gradient(0deg, #3274F8, #3390FD);}
        &:nth-child(2){background: linear-gradient(0deg, #FE5733, #FF7C34);}
        &:nth-child(3){background: linear-gradient(0deg, #00CC85, #00DB8F); margin-bottom: 0px;}
      }
    }
  }
  .bottom{
    align-items: stretch;
    .le{
      width: 594px; overflow: hidden; background-color:#fff; border: 1px solid #305EFD; border-radius: 10px;height: 193px; box-sizing: border-box;
      .name{font-size: 16px; text-align: center;}
      .logo{width: 72px; height: 72px; border-radius: 50%; display: block; margin: 0 auto 20px;}
      .ban{width: 466px; overflow: hidden;}
      .arrow{cursor: pointer;}
      .swiper-slide{cursor: pointer;}
    }
    .ri{
      width: 589px; padding: 20px 30px; background-color:#fff; box-sizing: border-box;
      .name{font-size: 28px; font-weight: bold; color: #305EFD; margin-bottom: 8px;}
      .intro{font-size: 16px; line-height: 27px; max-height: 108px; color: #333;}
    }
  }
}

.main4{
  padding-bottom: 74px;
  
  .item{
    text-align: center;
    .btn{
      display: inline-block; vertical-align: middle; padding: 0 26px;
      height: 48px; line-height: 48px; font-size: 20px;
      border-radius: 24px; font-weight: bold; margin-top: 18px;
    }
    &.item0 .btn{background: #E0EEFF; color: #0073FE;}
    &.item1 .btn{background: #D9F9EE; color: #1EB883;}
    &.item2 .btn{background: #FFEAE0; color: #D16E3F;}
    &.item3 .btn{background: #FFF1D2; color: #D16E3F;}
    .imgW{
      width: 301px; height: 296px; background-position: center; background-repeat: no-repeat; background-size: 100% 100%; padding: 1px; box-sizing: border-box;
      .div{
        margin: 192px auto 0; font-size: 16px; color: #000; width:90%;
        .li{margin-bottom: 8px;}
      }
    }
  }
}

.main5{
  background-position: center; background-size: cover; background-image: url('../images/newhome/hkyx-bg.png'); padding-bottom: 76px;
  .hynr_left {
    width: 275px;
  }
  
  .hynr_left h2 {
    font-size: 20px;
    color: #333333;
    margin: 0 0 13px 20px;
    font-style: italic;
  }
  
  .hynr_left h3 {
    padding-bottom: 18px; font-weight: bold;
    font-size: 29px;
    font-style: italic;
    color: #000000;
    text-align: right;
    background: url(../images/newhome/a10.png) no-repeat left bottom;
    margin-bottom: 15px;
  }
  
  .hynr_left h3 span {
    color: #3F66F4; font-weight: bold;
  }
  
  .hynr_left p {
    text-align: center;
    font-size: 16px;
    color: #333333;
    line-height: 27px;
    font-style: italic;
  }
  
  .hynr_left a {
    display: block;
    background: url(../images/newhome/a11.png);
    width: 234px;
    line-height: 58px;
    color: #333;
    font-size: 16px;
    padding-left: 41px;
    margin-top: 28px;
  }
  
  .hynr_left a:hover {
    color: #0747DF;
  }
  
  .hynr_left h4 {
    font-size: 12px;
    color: #98AEFF;
    padding: 14px 0 0 31px;
  }
  .tabs{
    .a{
      font-size: 22px; line-height: 28px; padding-bottom: 25px; position: relative; cursor: pointer; width: 20%; text-align: center;
      &.on{
        color: #305EFD;font-weight: bold;
        &::after{content: ''; display: block; width: 50%; height: 5px; background-color: #305EFD; position: absolute;bottom: 0; left: 50%; transform: translateX(-50%);}
      }
    }
  }
  .con{
    height: 450px;
    background: #FFFFFF;
    border: 1px solid #97ADFF;
    border-radius: 10px; padding: 0 40px;
    .top{margin-bottom: 30px;}
    .img{width: 337px; height: 376px;}
    .guonw{margin-bottom: 20px; font-size: 18px;}
    .name{font-size: 28px; color: #3F66F4;}
    .intro{color: #8CA5FF; font-size: 16px;}
    .school{
      font-size: 18px;width: 383px; height: 54px; border: 1px dashed #3F66F4; border-radius: 26px; margin-bottom: 20px;
      .sp{color: #3F66F4;}
    }
    .ri{
      width: 432px;
      .btn{
        width: 174px;
        height: 44px;
        background: #FFBA01; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 20px; margin-right: 16px;
        border-radius: 22px; animation: scaleAni 1.5s infinite linear;
      }
      .btn2{
        background: #00D88D;
      }
    }
  }
}
@keyframes scaleAni {
  from {
    transform: scale(1);
  }

  50% {
    transform: scale(1.1);
  }

  to {
    transform: scale(1);
  }
}
.flex1{flex: 1; width: 100%;}
.online{
  background-position: center; background-size: 1920px; background-image: url('../images/newhome/online.png'); 
  .w1200{height: 171px; box-sizing: border-box;}
  .form{ padding-left: 230px;}
  .text{
    margin-right: 8px;
    &.text1{width: 272px;}
    &.text2{width: 196px;}
    &.text3{width: 259px;}
    .el-input__inner{border-radius: 40px !important; font-size: 24px; height: 62px !important; line-height: 62px !important; padding: 0 27px; overflow: hidden;}
    .el-input__icon{font-size: 30px !important; color: #305EFD !important; line-height: 62px !important;}
    .el-input__suffix{right: 16px;}
  }
  .btn{
    width: 196px;
    height: 62px;
    background: #FCE100;
    border-radius: 31px; cursor: pointer; font-size: 28px; font-weight: bold; color: #0C08F2; cursor: pointer;
  }
}
.main6{
  .m6-box{align-items: stretch;}
  .le{width: 324px;
    .img{display: block;}
  }
  .ri{
    width: 861px;background: #FFFFFF; box-shadow: 0px 0px 7px 0px rgba(0,0,0,0.19); border-radius: 8px;
    
    .tabs{
      background-position: center; background-size: 100%; background-image: url('../images/newhome/rmzy-tit-bg1.png');  height: 99px; padding:0 30px;
      .sp{font-size: 30px; font-weight: bold; color: #FF6600;}
      .item{
        width: 149px; cursor: pointer;
        height: 60px;
        font-size: 24px;
        border-radius: 10px;
        &.on{background: #FF6600; color: #fff;}
      }
    }
    .tit{
      font-size: 24px; border-left: 5px solid #FF6600; padding-left: 25px;
      .more{font-size: 16px; color: #999999; background-position:right center; background-image: url('../images/newhome/jt-1.png'); background-repeat: no-repeat; padding-right: 16px;}
    }
    .line{height: 1px; width: 100%; border-bottom: 1px dashed #E3E3E3; margin: 15px 0 20px;}
    .con{
      padding: 30px;
    }
    .con1{
      .intro{color: #666666; font-size: 18px; margin-bottom: 40px; line-height: 33px;}
      .ys{
        font-size: 18px; color: #000; line-height: 33px;
        .li{text-decoration: underline;}
      }
    }
    .con2{padding:0 66px 0 0;
      .tabs2{
        width: 180px; 
        .item{
          width: 105px; margin: 0 auto; height: 36px; border-radius: 10px; margin-bottom: 20px; cursor: pointer;
          &.on{background: #FF6600; color: #fff;}
        }
      }
      .list{
        width: 614px; border-left: 4px solid #FAFAFA; height:436px; padding-left:30px;
        .item{
          padding: 30px 0 18px; border-bottom: 1px dashed #878787;
          &:last-child{border-bottom: none; padding-bottom: 0;}
          .div{width: 370px;}
          .imgW{
            width: 104px;
          }
          .more{color: #FF6600; background-position: right center; padding-right: 16px; background-image: url('../images/newhome/gxtj-kj-jt.png'); background-repeat: no-repeat;}
        }
      }
    }
  
    .con3{
      .line{border-bottom-style: solid;}
      .imgs{
        width: 287px;
        .img{
          display: block; margin-bottom: 23px;
          &:last-child{margin-bottom: 0;}
        }
      }
      .texts{width: 489px;}
      .intro{
         line-height: 27px;
      }
      .num{color: #FF6600;}
    }
  }
  
  .box2{
    margin-top: 30px;
    .ri{
      .tit{border-left-color: #7800FF;}
      .tabs{
        background-image: url('../images/newhome/rmzy-tit-bg2.png');
        .sp{color: #7800FF;}
        .item.on{background-color: #7800FF;}
      }
      .con2{
        .tabs2{
          .item.on{background-color: #7800FF;}
        }
        .list{
          .more{color: #7800FF; background-image: url('../images/newhome/gxtj-gt-jt.png');}
        }
      }
      .con3{
        .num{color: #7800FF;}
      }
    }
  }
}

.main7{
  background-color: #f4f7fc; overflow: hidden; padding-bottom: 80px;
  .tabs{
    justify-content: flex-end !important; margin-bottom: 38px;
    .a{
      font-size: 26px; padding-bottom: 16px; position: relative; cursor: pointer; text-align: center; margin-left: 80px;;
      &.on{
        color: #305EFD;
        &::after{content: ''; display: block; width: 60%; height: 5px; background-color: #305EFD; position: absolute;bottom: 0; left: 50%; transform: translateX(-50%);}
      }
    }
  }
  .con-box{
    background-position:0 center;  background-repeat: no-repeat; height: 602px; box-sizing: border-box; padding-top: 75px;
    &.bg0{background-image: url('../images/newhome/gx-bg1.png');}
    &.bg1{background-image: url('../images/newhome/gx-bg2.png');}
    &.bg2{background-image: url('../images/newhome/gx-bg3.png');}
    &.bg3{background-image: url('../images/newhome/gx-bg4.png');}
    .le{
      color: #fff; width: 358px; min-width: 358px;
      .name{font-weight: bold; font-size: 34px; margin-bottom: 50px;}
      .tabs2{
        border-left: 1px solid #fff;
        .a{
          font-size: 26px; position: relative; cursor: pointer;line-height: 68px; padding-left: 23px; box-sizing: border-box; margin-bottom: 10px;
          &:last-child{margin-bottom: 0px;}
          &.on{
            font-weight: bold; background-color: rgba(255,255,255,0.32);
            &::after{content: ''; display: block;  width: 9px; height: 9px; background-color: #fff; position: absolute; left: 0; top: 0;}
          }
        }
      }
    }
    .ri{
      flex: 1; width: 790px; margin-left: 45px; height: 459px; background-color: #fff; border-radius: 10px 0 0 10px; position: relative;
      &::after{position: absolute; left: 100%; display: block; content: ''; z-index: 0; height: 100%; width: 3000%; top: 0; background-color: #fff;}
      .tit{
        font-size: 24px; border-left: 5px solid #305EFD; padding-left: 25px;
        .more{font-size: 16px; color: #305EFD; background-position:right center; background-image: url('../images/newhome/jt-8.png'); background-repeat: no-repeat; padding-right: 16px;}
      }
      .line{height: 1px; width: 100%; border-bottom: 1px dashed #E3E3E3; margin: 15px 0 20px;}
      .con{
        padding: 40px; width: 100%; box-sizing: border-box;
      }
      .con1{
        .intro{color: #666666; font-size: 18px; margin-bottom: 40px; line-height: 33px;}
        .ys{
          font-size: 18px; color: #000; line-height: 33px;
          .li{text-decoration: underline;}
        }
      }
      .con2{
        padding:0; position: relative; height: 100%;
        .bg{width: 180px; right: 0; height: 100%; background-color: #305EFD; position: absolute;}
        .tabs2{
          width: 180px; background-color: #305EFD; margin-left: 34px; position: relative;z-index: 20;
          .item{
            width: 119px; margin: 0 auto; height: 37px; border-radius: 10px; margin-bottom: 20px; cursor: pointer; background-position: center; padding-left: 14px;  background-repeat: no-repeat;box-sizing: border-box; color: #fff;
            &.on{background-image: url('../images/newhome/jt-7.png'); color: #000;}
          }
        }
        .list{
          width: 580px; height:436px; padding-left:30px; box-sizing: border-box;
          .item{
            padding: 30px 0 18px; border-bottom: 1px dashed #878787;
            &:last-child{border-bottom: none; padding-bottom: 0;}
            .div{width: 370px; margin: 0 20px; flex: 1;}
            .imgW{
              width: 104px;
            }
            .intro{color: #666666; font-size: 14px;}
            .more{color: #999; background-position: right center; padding-right: 16px; background-image: url('../images/newhome/jt-1.png'); background-repeat: no-repeat; width: 82px; box-sizing: border-box;}
          }
        }
      }
        
      .con3{
        padding:17px 20px;
        .line{border-bottom-style: solid;}
        .imgs{
          width: 268px; min-width: 268px; margin-right: 22px;
          .img{
            display: block; margin-bottom: 27px;
            &:last-child{margin-bottom: 0;}
          }
        }
        .texts{width: 489px;}
        .intro{
           line-height: 27px; background-color: #FAFAFA; padding: 15px; font-size: 16px;
        }
        .num{color: #305EFD;}
      }
    }
  }
  
}

.main8{
  background: linear-gradient(0deg, #E4EFFA 61%, #FFFFFF 100%); padding-bottom: 56px;
  .top{
    background: #FFFFFF;
    border: 1px solid #FAFDFF;
    border-radius: 10px; padding: 44px 0px 17px 50px;
    .dd{ margin-bottom: 27px;}
    .lab{font-size: 20px; font-weight: bold; color: #000; line-height: 53px; width: 110px; max-width: 110px; min-width: 110px;}
    .item{
      width: 150px;
      height: 53px; text-align: center; font-size: 17px; margin-right: 11px; cursor: pointer;
      background: #FFFFFF;
      border: 1px solid #D7E0FF;
      border-radius: 4px; position: relative; line-height: 53px;
      &:last-child{margin-right: 0;}
      &.on{
        border-color: #305EFD; color: #305EFD; background-position: right bottom; background-repeat: no-repeat; background-image: url('../images/newhome/on.png'); font-weight: bold;
      }
    }
  }
  .list{
    flex-wrap: wrap; margin-top: 23px;
    .item{
      padding: 15px; background-color: #fff; margin-bottom: 26px; box-sizing: border-box; width: 584px; border-radius: 10px;
      .imgW{
        width: 265px; margin-right: 20px;
      }
      .img{width: 100%; height: 144px; object-fit: cover; margin-bottom: 20px;}
      .p{color: #666666; font-size: 16px; text-align: center;}
      .div{
        width: 264px;
        .name{font-size: 24px; font-weight: bold; margin-bottom: 10px; line-height: 35px; max-height: 70px;}
        .intro{color: #666666; font-size: 18px; line-height: 30px; margin-bottom: 10px; max-height: 60px;}
        .btn{
          width: 117px;
          height: 37px;
          background: #E4EAFF; color: #305EFD; margin-right: 9px;
          border-radius: 8px;
          &.btn2{
            background: #305EFD; color: #fff;
          }
        }
      }
    }
  }
  .page{
    text-align: center;
    .number{background-color: #fff !important; border-radius: 50% !important; width:35px; height:35px; line-height:35px; font-size: 20px;}
    .active{background-color: #305EFD !important;}
    .btn-prev,.btn-next{border-radius: 50% !important; width:35px; height:35px; line-height:35px; background-color: #305EFD;}
    .el-icon{color: #fff; font-size: 20px;}
    button[disabled]{
      background-color: #fff !important;
      .el-icon{color: #E4EAFF;}
    }
  }
}

.main9{
  padding-bottom: 110px;
}